<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>部门树</title>
    <link rel="stylesheet" href="http://localhost:8081/base/static/assets/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="http://localhost:8081/base/static/assets/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <script src="http://localhost:8081/base/static/assets/js/jquery-3.4.1.min.js"></script>
    <script src="http://localhost:8081/base/static/assets/zTree_v3/js/jquery.ztree.all.js"></script>
    <script src="http://localhost:8081/base/static/js/tree/departTree2.js"></script>
</head>
<style type="text/css">
    .ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
    .ztree li ul{ margin:0; padding:0}
    .ztree li {line-height:30px;}
    .ztree li a {width:20%;height:30px;padding-top: 0px;}
    .ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
    .ztree li a span.button.switch {visibility:hidden}
    .ztree.showIcon li a span.button.switch {visibility:visible}
    .ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
    .ztree li span {line-height:30px;}
    .ztree li span.button {margin-top: -7px;}
    .ztree li span.button.switch {width: 16px;height: 16px;}

    .ztree li a.level0 span {font-size: 150%;font-weight: bold;}
    .ztree li span.button {background-image:url("http://localhost:8081/base/static/assets/zTree_v3/css/outlook/left_menuForOutLook.png"); *background-image:url("http://localhost:8081/base/static/assets/zTree_v3/css/outlook/left_menuForOutLook.gif")}
    .ztree li span.button.switch.level0 {width: 20px; height:20px}
    .ztree li span.button.switch.level1 {width: 20px; height:20px}
    .ztree li span.button.noline_open {background-position: 0 0;}
    .ztree li span.button.noline_close {background-position: -18px 0;}
    .ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
    .ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
</style>
<body>
    <h4>Ztree异步加载使用例子</h4>
    <ul id="zTree" class="ztree"></ul>
</body>
</html>